<template>
  <div>
    <el-card>
      <el-form :model="query">
        <el-form-item >
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="昵称" prop="title"></el-table-column>        
        <el-table-column label="创建时间" prop="createtime">
          <template slot-scope="scope">
            {{moment(scope.row.createtime)}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="total" :current-page="query.page" :page-size="query.pageSize" @current-change="pageChange"></el-pagination>
    </el-card>

    <el-dialog title="添加分类" :visible.sync="addVisible">
        <add @success="addSuccess" />
    </el-dialog>

    <el-dialog title="编辑分类" :visible.sync="editVisible">
        <edit @success="editSuccess" :row="curRow" />
    </el-dialog>
  </div>
</template>

<script>
import {page,remove} from "@/api/shop/goodscate"
import add from './goodscate/add'
import edit from './goodscate/edit'
import moment from "moment"

  export default {
    components:{
      add,
      edit
    },
    data(){
      return {
        query:{
          page:1,
          pageSize:10,
        },
        total:0,
        dataList:[],
        addVisible:false,
        editVisible:false,
        curRow:{}
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){
        page(this.query).then(res=>{
          this.dataList = res.data;
          this.total = res.total;
        })
      },
      pageChange(page){
        this.query.page = page;
        this.getData();
      },
      add(){
        this.addVisible = true;
      },
      addSuccess(){
        this.addVisible = false;
        this.getData();
      },
      edit(row){
        this.editVisible = true;
        this.curRow = row;
      },
      editSuccess(){
        this.editVisible = false;
        this.getData();
      },
      del(row){
        this.$confirm("确定要删除该项吗?",'提示',{}).then(()=>{
          remove(row.id).then(()=>{
            this.$message.success("删除成功")
            this.getData();
          })
        }).catch(()=>{
          console.log("取消了")
        })
      },
      moment(time){
        return moment(time*1000).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  }
</script>

<style scoped>

</style>